#flappy_bird {
    height: 100vh;
    overflow: hidden;
    outline: none;
    position: relative;

    .title {
        z-index: 10;
        position: absolute;
        flex-direction: column;
        inset: 0;

        .subtitle {
            margin-top: 0.5rem;
        }
    }

    .bird {
        // --bird-size: 60px;
        // --bird-top: -60;
        position: absolute;
        width: calc(var(--bird-size) * 1px);
        height: calc(var(--bird-size) * 1px);
        left: calc(var(--bird-size) * 1px);
        top: calc(var(--bird-top) * 1px);
        // border-radius: 50%;
        // background-color: hsl(50, 75%, 50%);
    }

    .pipe {
        // --pipe-width: 120;
        // --pipe-left: 100;
        // --hole-top: 500;
        // --hole-height: 120;
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--pipe-left) * 1px);
        width: calc(var(--pipe-width) * 1px);

        .segment {
            position: absolute;
            width: 100%;
            background-color: hsl(100, 75%, 50%);
        }

        .top {
            top: 0;
            bottom: calc(var(--hole-top) * 1px);
        }

        .bottom {
            bottom: 0;
            top: calc(100vh - var(--hole-top) * 1px + calc(var(--hole-height) * 1px));
        }
    }
}